<template>
    <div>
        <Bread title="Report management / Query Daily Report"/>
        <el-row :gutter="40">
            <el-col :span="8">
                <el-card shadow="never" class="form-card">
                    <div slot="header">
                        <span style="font-weight: bold">Query Condition</span>
                    </div>
                    <el-form ref="searchReportForm"
                             :model="searchReportForm"
                             :rules="searchReportRules"
                             size="medium"
                             label-width="100px"
                             label-position="left">
                        <el-row type="flex" justify="start" align="top">
                            <el-form-item label-width="150px" label="Sales Department:" prop="reportDept">
                                <el-select v-model="searchReportForm.reportDept"
                                           placeholder="Please choose sales department" filterable clearable
                                           :style="{width: '120%'}">
                                    <el-option v-for="(item, index) in options.customerMgrDeptOptions" :key="index"
                                               :label="item.label"
                                               :value="item.value" :disabled="item.disabled"></el-option>
                                </el-select>
                            </el-form-item>

                        </el-row>
                        <el-row type="flex" justify="start" align="top">
                            <el-form-item label-width="160px" label="Customer Manager" prop="customerMgrId">
                                <el-select v-model="searchReportForm.customerMgrId"
                                           placeholder="Please choose customer manager" filterable clearable
                                           :style="{width: '140%'}">
                                    <el-option v-for="(item, index) in options.customerMgrNameOptions" :key="index"
                                               :label="item.label"
                                               :value="item.value"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-row>
                        <el-row type="flex" justify="start" align="top">
                            <el-form-item label="Week" prop="reportWeek">
                                <el-select v-model="searchReportForm.reportWeek" placeholder="Please choose week"
                                           clearable :style="{width: '140%'}">
                                    <el-option v-for="

(item, index) in options.reportWeekOptions" :key="index"
                                               :label="item.label"
                                               :value="item.value" :disabled="item.disabled"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-row>
                        <el-row type="flex" justify="start" align="top">
                            <el-form-item label="Date" prop="reportDate">
                                <el-date-picker type="daterange" v-model="searchReportForm.reportDate"
                                                format="yyyy-MM-dd"
                                                value-format="yyyy-MM-dd" :style="{width: '80%'}"
                                                start-placeholder="yyyy-MM-dd"
                                                end-placeholder="yyyy-MM-dd" range-separator="to"
                                                clearable></el-date-picker>
                            </el-form-item>
                        </el-row>
                        <el-row type="flex" justify="start" align="top">
                            <el-form-item size="large">
                                <el-button type="primary" icon="el-icon-search" size="medium" @click="submitSearch">
                                    Search
                                </el-button>
                                <el-button @click="resetSearch">Reset</el-button>
                            </el-form-item>
                        </el-row>
                    </el-form>
                </el-card>

            </el-col>
            <el-col :span="14">
                <el-card class="table-card">
                    <div slot="header">
                        <span style="font-weight: bold">Query Result</span>
                        <el-button size="medium"
                                   style="float: right; " @click="export2Excel">Export
                        </el-button>
                    </div>
                    <el-table
                        id="reportTable"
                        :header-cell-style="{fontSize:'12px',background:'#eef1f6',color:'#495085'}"
                        v-loading="this.$store.getters.isLoading"
                        :data="tableData"
                              ref="reportTable"
                              @selection-change="handleSelectionChange">
                        <el-table-column
                            type="selection"
                            width="55">
                        </el-table-column>
                        <el-table-column
                            prop="reportDept"
                            label="Sales Department"
                            width="130">
                        </el-table-column>
                        <el-table-column
                            prop="customerMgrId"
                            label="Customer Manager ID"
                            width="155">
                        </el-table-column>
                        <el-table-column
                            prop="customerMgrName"
                            label="Customer Manager Name"
                            width="145">
                        </el-table-column>
                        <el-table-column
                            prop="reportDate"
                            label="Date"
                            width="120">
                        </el-table-column>
                        <el-table-column
                            prop="reportWeek"
                            label="Week"
                            width="80">
                        </el-table-column>
                        <el-table-column
                            prop="reportContent"
                            label="Report Content"
                            width="200">
                        </el-table-column>
                    </el-table>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import Bread from "@/components/Bread/Bread";
import {options} from "@/data/const"

export default {
    name: "SearchReport",
    components: {Bread},
    props: [],
    data() {
        return {
            options: options,
            searchReportForm: {
                reportDept: null,
                customerMgrId: null,
                reportWeek: null,
                reportDate: [],
            },
            reportSearch: {
                "marketDept": null,
                "customerMgrId": null,
                "week": null,
                "dateFrom": null,
                "dateTo": null
            },
            searchReportRules: {
                reportDept: [],
                customerMgrId: [],
                reportWeek: [],
                reportDate: [],
            },

            tableData: []
        }
    },
    computed: {},
    watch: {},
    created() {
    },
    mounted() {

    },
    methods: {
        submitSearch() {
            this.$refs['searchReportForm'].validate(valid => {
                this.reportSearch.marketDept = this.searchReportForm.reportDept
                this.reportSearch.customerMgrId = this.searchReportForm.customerMgrId
                this.reportSearch.week = this.searchReportForm.reportWeek
                if(this.searchReportForm.reportDate.length === 2){
                    this.reportSearch.dateFrom = this.searchReportForm.reportDate[0]
                    this.reportSearch.dateTo = this.searchReportForm.reportDate[1]
                }else{
                    this.reportSearch.dateFrom = null
                    this.reportSearch.dateTo = null
                }
                console.log("Data is ")
                console.log(this.reportSearch)
                this.$axios.post("/report/report/searchReport", this.reportSearch).then(
                    e => {
                        console.log(e)
                        if (e.data.status === 200) {
                            this.tableData = e.data.obj
                            this.$message.success(e.data.msg)
                        }
                    }
                )
            })
        },
        resetSearch() {
            this.$refs['searchReportForm'].resetFields()
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        export2Excel: function() {
            let tables = document.getElementById("reportTable");
            let table_book = this.$XLSX.utils.table_to_book(tables);
            var table_write = this.$XLSX.write(table_book, {
                bookType: "xlsx",
                bookSST: true,
                type: "array"
            });
            try {
                this.$FileSaver.saveAs(
                    new Blob([table_write], { type: "application/octet-stream" }),
                    "report.xlsx"
                );
            } catch (e) {
                if (typeof console !== "undefined") console.log(e, table_write);
            }
            return table_write;
        },
    }
}
</script>

<style scoped>
.form-card {
    width: 100%;
    height: 700px;
    border-radius: 15px;
    box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2);
}

.table-card {
    width: 100%;
    border-radius: 15px;
    height: 700px;
}
</style>